<template>
  <view class="wrap">
    <view class="pox">
      <status-bar></status-bar>
      <view class="head-nav">
        <template v-if="userDetail">
          <avatar :src='setUrl(userDetail.avatar)' styles='width: 72rpx; height: 72rpx;border: 1px solid #FFF;margin-right: 30rpx' @click="goUser"></avatar>
        </template>
        <view class="title">约调研</view>
        <view class="order">
          <view class="item" @click="goMsg">
            <image src="../../static/ling.png" class="img"></image>
            <uv-badge :isDot="true" bgColor='#E43222' absolute :offset="[0, 0]" :show='showBadge'></uv-badge>
          </view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="list">
        <view class="item" v-for="(item,index) in listPage" :key="index" @click="tabClick(item)">
          <view class="left">
            <view class="icon">
              <image :src="`../../static/${item.image}`" class="img"></image>
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
          <uv-icon name="arrow-right" size='20rpx' color="#B8B8B8"></uv-icon>
        </view>
      </view>
      <view class="foot">
        <view class="ls" v-for="(item,index) in listFoot" :key="index" @click="myClick(item)">
          <view class="icon">
            <image :src="`../../static/${item.image}`" class="img"></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <tabbar :current='3'></tabbar>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUser } from '@/store';
import { setUrl } from '@/common';
import { post } from '@/api';
import { onShow } from '@dcloudio/uni-app';

const userDetail = computed(() => {
  const store = useUser();
  return store.userDetail;
});
const listPage = [
  { name: '上市公司调研', image: 'invest1.png', id: 1 },
  { name: '策略会&线下活动', image: 'invest2.png', id: 2 },
  { name: '发布-上市公司调研', image: 'invest1.png', id: 3 },
  { name: '发布-策略会&线下活动', image: 'invest2.png', id: 4 },
]
const listFoot = [
  { name: '我的调研', image: 'invest3.png', id: 1 },
  { name: '我报名的调研', image: 'invest4.png', id: 2 },
  { name: '我收到的邀请', image: 'invest5.png', id: 3 }
]
let showBadge = ref(false);
let isAuth = '';

onShow(() => {
  getMessage();
  getAuth();
})

function getMessage(){
  post('api/message/homeMessage').then(res => {
    const data = res.data;
    let sum = 0;
    for(let key in data){
      if(typeof data[key] == 'number'){
        sum += data[key]
      }
    }
    showBadge.value = sum > 0 ? true : false;
  })
}
// 查询是否有身份认证
function getAuth(){
  post('api/user/getIdentityAuthInfo').then(res => {
    if(res.code == 1){
      isAuth = res.data;
    }
  })
}
function tabClick(row){
  if(row.id == 3 || row.id == 4){
    if(isAuth){
      if(isAuth.examine_status != 1){
        uni.navigateTo({
          url: '/pages/invest/cert'
        });
      }else{
        uni.navigateTo({
          url: `/pages/invest/issue?index=${row.id}`
        });
      }
    }else{
      uni.navigateTo({
        url: '/pages/invest/cert'
      });
    }
    return;
  }
  uni.navigateTo({
    url: `/pages/invest/list?index=${row.id}&isMy=0`
  });
}
function myClick(row){
  let url;
  switch (row.id) {
    case 1:
      url = '/pages/invest/list?isMy=1';
      break;
    case 2:
      url = '/pages/invest/myList?index=1';
      break;
    case 3:
      url = '/pages/invest/myList?index=0';
      break;

    default:
  }
  if (url) {
    uni.navigateTo({ url });
  }
}
function goMsg(){
  uni.navigateTo({
    url: '/pages/mine/message/index'
  });
}
function goUser(){
  uni.navigateTo({
  	url: '/pages/mine/index'
  });
}
</script>

<style lang="scss" scoped>
  .box{
    padding: 30rpx;
    .foot{
      background-color: #fff;
      border-radius: 24rpx;
      height: 168rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .ls{
        .icon{
          width: 56rpx;
          height: 56rpx;
          font-size: 0;
          margin: 0 auto;
        }
        .name{
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          padding-top: 8rpx;
        }
      }
    }
    .list{
      width: 100%;
      .item{
        background-color: #fff;
        width: 100%;
        height: 140rpx;
        border-radius: 24rpx;
        padding: 0 30rpx;
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          display: flex;
          align-items: center;
          flex: 1;
          .name{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
            padding-left: 24rpx;
          }
          .icon{
            width: 40rpx;
            height: 40rpx;
            font-size: 0;
          }
        }
      }
    }
  }
  .pox{
    position: relative;
    background-color: #fff;
    width: 100%;
    z-index: 2;
    // position: fixed;
    // left: 0;
    // top: 0;
    // z-index: 99;
    .head-nav{
      width: 100%;
      padding: 20rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        font-size: 16px;
      }
      .order{
        width: 40rpx;
        display: flex;
        align-items: center;
        .item{
          width: 40rpx;
          height: 40rpx;
          position: relative;
        }
      }
    }
  }
  .wrap{
    background-color: #F5F5F5;
    width: 100%;
    min-height: 100vh;
  }
</style>